var BoardSelect = function () {
  var template = /* html */ `
    <el-select filterable v-model="selectValue" :value-key="valueKey" :loading="loading" :clearable="clearable" :placeholder="placeholder"
      :size="size" :filter-method="filterSelectMethod" @visible-change="visibleChange" @change="handleChange">
      <template v-if="hasOptionWhenNull&&selectOption!==null">
        <el-option :value="selectOption.value" :label="selectOption.label" style="display:none"></el-option>
      </template>
      <slot :options="showOptions">
      </slot>
    </el-select>
  `;

  return {
    props: {
      value: {
        type: [Number, Object, String],
        required: true
      },
      options: {
        type: Array,
        default: function () {
          return [];
        }
      },
      valueKey: String,
      loading: Boolean,
      filterMethod: Function,
      clearable: Boolean,
      placeholder: String,
      size: String,
      valueField: {
        type: String,
        default: 'value'
      },
      labelField: {
        type: String,
        default: 'label'
      },
      hasOptionWhenNull:{
        type:Boolean,
        default:false
      }
    },

    watch:{
      value:function(){
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }
        this.selectValue = this.value;
      },

      options:function(){
        this.showOptions = this.options;
      }
    },

    computed:{
      selectOption:function(){
        if (this.modeType !== 'show') {
          return null;
        }
        var value = this.selectValue;
        if (value === '') {
          return null;
        }

        if (typeof value === 'object') {
          var labelField = this.labelField;
          return {
            value:value,
            label:value[labelField]
          };
        }
        return {
          value:value,
          label:value
        };
      }
    },

    data: function () {
      return {
        selectValue: this.value,
        inputValue: null,
        showOptions: this.options,
        visibleStatus: false,
        modeType: 'show'
      };
    },

    methods: {
      filterSelectMethod: function (value) {
        this.toFilterSelectData(value);
        this.modeType = 'search';
      },

      toFilterSelectData: function (queryValue) {
        var options = this.options;
        var filterMethod = this.filterMethod;
        if (filterMethod !== undefined) {
          options = filterMethod(options, queryValue);
        } else {
          if (queryValue !== '') {
            var self = this;
            queryValue = queryValue.toLowerCase();
            var optionType = typeof options[0];
            options = _.filter(options, function (option) {
              if (optionType !== 'object') {
                return option.toLowerCase().indexOf(queryValue) !== -1;
              }

              var optionValue = option[self.labelField];
              if (SysUtil.isEmpty(optionValue)) {
                return false;
              }
              return optionValue.toLowerCase().indexOf(queryValue) !== -1;
            });
          }
        }

        this.showOptions = options;
      },

      visibleChange: function (visible) {
        this.modeType = 'show';
        this.visibleStatus = this.visible;
        this.$emit('visible-change', visible);
      },

      handleChange:function(){
        var selectValue = this.selectValue;
        this.inputValue = selectValue;
        this.$emit('input',selectValue);
        this.$emit('change',selectValue);
      }
    },

    template: template
  };
}();
